import React from 'react';
import style from '@/assets/css/index.module.css';
import TabBar from '@/components/TabBar';
import type coupon from '@/types/coupon';
import { sleep } from 'antd-mobile/es/utils/sleep';
import type room from '@/types/room';

interface InputDom{
    code:string;
    key:string;
    target:{
        value:string;
    };
}

const Index = () =>
{
    const [search,SetSearch] = useState<string>('');
    const [CouponList,SetCouponList] = useState<coupon[]>([]);
    const [list,SetList] = useState<room[]>([]);
    const [HasMore,SetHasMore] = useState<boolean>(true);
    const [page,SetPage] = useState<number>(1);
    const [ListCount,SetListCount] = useState<number>(0);

    useEffect(() => {
        GetCouponData();
    },[]);

    const OnSearch = async (e:InputDom) =>
    {
        // keyCode 108 13 code || key Enter
        if(e.code === "Enter" || e.key === "Enter")
        {
            SetSearch(e.target.value);
            await OnRefresh();
        }
    }

    const OnRefresh = async () =>
    {
        await sleep(1000);
        SetList([]);
        SetPage(1);
        SetHasMore(true);
    }

    const OnLoadMore = async () =>
    {
        await sleep(1000);
        await GetRoomData();
    }

    const GetCouponData = async () =>
    {
        const result = await React.Http.post('/index/coupon');

        if(result.code === 1)
        {
            SetCouponList(result.data);
        }
    }

    const GetRoomData = async () =>
    {
        const params:{
            page:number;
            search:string;
        } = {
            page,
            search
        }

        const result = await React.Http.post('/room/index',params);

        if(result.code === 1)
        {
            SetList(v => {
                const data = [...v,...result.data.list];

                SetListCount(num => num + result.data.count);

                return data;
            })

            if(ListCount === list.length)
            {
                SetHasMore(false);

                return false;
            }

            SetHasMore(true);
            SetPage(page => page + 1);
        }else{
            SetHasMore(false);

            React.fail(result.msg);
        }
    }

    return (
        <>
            {/* <!-- 导航 --> */}
            <div className={style.top}>
                <div>首页</div>
            </div>
            {/* <!-- 轮播图的优惠券 --> */}
            <CouponSwiper CouponList={CouponList} />

            <div className={style.hotel_search}>
                <React.UI.Input defaultValue={search} onKeyDown={(e:InputDom) => OnSearch(e)} clearable placeholder="请输入关键词搜索" />
            </div>

            <div className={style.hotellist}>
                {/* 下拉刷新 */}
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    {list.map((item:room,index:number) =>
                    {
                        return (
                            <div className={style.item} key={index}>
                                <NavLink to={`/room/info?roomid=${item.id}`}>
                                    <div className={style.images}>
                                        <div className={style.swipers}>
                                            <img src={item.thumb_text} alt="" />
                                        </div>
                                        <div className={style.title}>{item.name}</div>
                                    </div>
                                    <div>
                                        <div className={style.item_top}>
                                            {item.flag_text.map((val:string,idx:number) =>
                                            {
                                                return (
                                                    <span key={idx}>{val}</span>
                                                )
                                            })}
                                        </div>
                                        <div className={style.item_bot}>
                                            <div className={style.font}>
                                                <span className={style.price}>￥{item.price}/晚</span>
                                                {/* <span className={style.market_price}>￥80.00/晚</span> */}
                                            </div>
                                            <div className={style.btn}>立即预定</div>
                                        </div>
                                    </div>
                                </NavLink>
                            </div>
                        )
                    })}

                    {/* 上拉加载 */}
                    <React.UI.InfiniteScroll loadMore={OnLoadMore} hasMore={HasMore} threshold={0} />
                </React.UI.PullToRefresh>
            </div>

            <div style={{ height: '55px' }}></div>

            <TabBar />
        </>
    )
}

// 优惠券轮播图
const CouponSwiper = memo(({CouponList}:{CouponList:coupon[]}) =>
{
    if(CouponList.length > 0)
    {
        return (
            <>
                <React.UI.Swiper autoplay={true} loop={true}>
                    {CouponList.map((item,index) =>
                    {
                        return (
                            <React.UI.Swiper.Item key={index}>
                                <React.UI.Image src={item.thumb_cdn} width={'100%'} height={240} fit='fill' />
                            </React.UI.Swiper.Item>
                        )
                    })}
                </React.UI.Swiper>
            </>
        )
    }
});

export default Index;